const webpack = require("webpack");
const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const ESLintPlugin = require("eslint-webpack-plugin");


module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "js/[name]-[contenthash:8].js",
        path: path.resolve(__dirname, "dist"),
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: "babel-loader",
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                ],
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "less-loader",
                ],
            },
            {
                test: /\.(png|jpg|jpeg)$/,
                use: {
                    loader: "url-loader",
                    options: {
                        esModule: false,
                        limit: 10 * 1024,
                        name: "images/[name].[hash].[ext]",
                    },
                },
            },
            {
                test: /\.vue$/,
                use: ["vue-loader"],
            },
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            title: "Build VUE with Webpack",
        }),
        new webpack.DefinePlugin({
            BASE_URL: JSON.stringify("./"),
        }),
        new webpack.ProvidePlugin({
            process: "process/browser",
        }),
        // If webpack or webpack-dev-server are launched with the --hot option, 
        // this plugin will be added automatically, so you may not need to 
        // add this to your webpack.config.js.
        // new webpack.HotModuleReplacementPlugin(),
        new MiniCssExtractPlugin({
            filename: "css/[name].css",
        }),
        // favicon拷贝
        new CopyWebpackPlugin({ patterns: [{ from: "public", to: "." }] }),
        // ESLint loader will be decrypted
        new ESLintPlugin({
            extensions: ["js", "vue"],
            fix: true
        }),
        // new BundleAnalyzerPlugin({
        //     analyzerMode: "static"
        // })
    ],
};